<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: 孙立政
 * @Date: 2021-12-20 21:55:25
 * @LastEditors: 孙立政
 * @LastEditTime: 2022-01-21 17:19:19
-->
<template>
  <div class="item">
    <div class="item-left">
      <div v-for="(item, index) in state.itemList.slice(0, 10)" :key="index" class="box">
        <img :src="item.cover" alt="" />
        <div class="goods-title">螺蛳粉河粉加拌饭</div>
        <div class="goods-flavor">湘菜、地方菜、下沙</div>
        <div class="goods-tag">
          <Tag color="#FAE8D5" text-color="#EC800F">标签</Tag>
        </div>
        <div class="goods-price">起送￥20 配送￥4</div>
        <div class="goods-bottom">3.1km</div>
      </div>
    </div>
    <div class="item-right">
      <div v-for="(item, index) in state.itemList.slice(10, 20)" :key="index" class="box">
        <img :src="item.cover" alt="" />
        <div class="goods-title">螺蛳粉河粉加拌饭</div>
        <div class="goods-flavor">湘菜、地方菜、下沙</div>
        <div class="goods-tag">
          <Tag color="#FAE8D5" text-color="#EC800F">标签</Tag>
        </div>
        <div class="goods-price">起送￥20 配送￥4</div>
        <div class="goods-bottom">3.1km</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { Tag } from 'vant'
import IndexApi from '@/service/api/Index/index'

const state = reactive({
  itemList: [
    {
      id: 0,
      cover: '',
      goodsDTOList: {
        cover: '',
      },
    },
  ],
})

onMounted(() => {
  getList()
})

const getList = () => {
  const data = {
    marketRequestVO: {
      page: 1,
      size: 50,
      latitude: 28.592388,
      longitude: 119.275865,
      regionId: 1,
      orderBy: 3,
      isTakeaway: true,
    },
  }
  IndexApi.login(data)
    .then((res: any) => {
      state.itemList = res.marketVOList
      const lengths = res.marketVOList.length
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<style lang="scss" scoped>
.item {
  width: 710px;
  margin: 16px auto;
  .box {
    width: 346px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    img {
      width: 314px;
      border-radius: 12px;
      display: block;
      margin: 0 auto;
      margin-top: 16px;
    }
    color: #333333;
    .goods-title {
      width: 314px;
      height: 45px;
      line-height: 45px;
      margin: 0 auto;
      font-size: 32px;
      font-family: PingFangSC-Medium;
      text-align: left;
      margin-top: 14px;
    }
    .goods-flavor {
      width: 314px;
      margin: 0 auto;
      font-size: 24px;
      text-align: left;
      margin-top: 8px;
    }
    .goods-tag {
      width: 314px;
      margin: 0 auto;
      font-size: 23px;
      margin-top: 8px;
    }
    .goods-price {
      width: 314px;
      margin: 0 auto;
      font-size: 23px;
      height: 30px;
      margin-top: 8px;
      color: #666666;
      line-height: 30px;
    }
    .goods-bottom {
      width: 314px;
      height: 61px;
      line-height: 61px;
      margin: 0 auto;
      font-size: 23px;
      text-align: right;
      border-top: 1px solid #f4f4f4;
      margin-top: 20px;
      color: #666666;
    }
  }
  .item-left {
    float: left;
    width: 346px;
    margin-right: 18px;
    border-radius: 12px;
  }
  .item-right {
    float: left;
    width: 346px;
    border-radius: 12px;
  }
}
</style>
